
import './addStopVehicle.scss'
import { useEffect, useState } from 'react';
import { Steps, Button, Form, Input, Grid, Radio, Tree, Popconfirm, Message } from '@arco-design/web-react';
import { IconPen, IconPlusCircle, IconMinusCircle } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router-dom'
import mochaApi from '../../../API/mochaApi';
const FormItem = Form.Item;
const Step = Steps.Step;

const AddStopVehicle = () => {
  const navigate = useNavigate();
  const [current, setCurrent] = useState(1);                //步骤条 步数
  const [inputValue, setInputValue] = useState('');         //左侧搜索框
  const [formCar] = Form.useForm();
  const [formRoad] = Form.useForm();
  const [formEquipment] = Form.useForm();
  const [btnDisplay, setBtnDisplay] = useState(true)        //控制添加与修改按钮的显示
  const [treeData, setTreeData] = useState([]);             //树---数据
  const [hide, setHide] = useState(false);                  //数据获取成功之后再渲染树
  const getData = () => {
    mochaApi.getStopAdd().then((res) => {
      if (res.code === 200) {
        setTreeData(res.result)
        setHide(true)
      }
    })
  }
  useEffect(() => {
    getData()
  }, [])
  //查询
  const leftQueryInput = () => {
    // console.log(inputValue);
    if (inputValue.length > 0) {
      mochaApi.addQuery(inputValue).then((res) => {
        if (res.code === 200) {
          setTreeData(res.result)
        }
      })
    } else {
      getData()
    }
  }
  //添加--图标
  const addModalIcon = (node) => {
    setBtnDisplay(true)
    let state = node.dataRef.key.lastIndexOf('-')
    if (state === -1) {
      setCurrent(2)
      formRoad.clearFields()
      formRoad.setFieldValue('parkingId', node.dataRef.key)
    } else {
      let id = node.dataRef.key.substr(state + 1, node.dataRef.key.length)
      setCurrent(3)
      formEquipment.clearFields()
      formEquipment.setFieldValue('passId', id)
    }
  }

  //删除图标
  const deleteIcon = (node) => {
    //1----停车场   2----通道   3-----设备
    let state = node.dataRef.key.lastIndexOf('-')
    let id = node.dataRef.key.substr(state + 1, node.dataRef.key.length)
    if (node.dataRef.flag === 1) {
      mochaApi.stopDelete(id).then((res) => {
        if (res.code === 200) {
          getData()
          Message.success('删除成功')
        } else {
          Message.error('删除失败')
        }
      })
    } else if (node.dataRef.flag === 2) {
      mochaApi.stopDeletePassageway(Number(id)).then((res) => {
        if (res.code === 200) {
          getData()
          Message.success('删除成功')
        } else {
          Message.error('删除失败')
        }
      })
    } else {
      mochaApi.stopDeleteEquipment(Number(id)).then((res) => {
        if (res.code === 200) {
          getData()
          Message.success('删除成功')
        } else {
          Message.error('删除失败')
        }
      })
    }
  }
  //新增停车场信息页面
  const leftAdd = () => {
    setCurrent(1)
    setBtnDisplay(true)
    formCar.clearFields()
  }
  //新增停车场
  const determineCar = () => {
    let value = formCar.getFieldsValue()
    verification1(value)
  }
  //新增通道
  const determinePassageway = () => {
    let value = formRoad.getFieldsValue()
    verification2(value)
  }
  //新增设备
  const determineEquipment = () => {
    let value = formEquipment.getFieldsValue()
    verification3(value)
  }
  //停车场表单校验
  async function verification1(value) {
    try {
      await formCar.validate()
      mochaApi.addParkingLot(value).then((res) => {
        if (res.code === 200) {
          getData()
          formCar.clearFields()
          Message.success('添加成功')
        } else {
          Message.error("添加失败")
        }
      })
    } catch (e) {
      console.log(e);
    }
  }
  async function verification2(value) {
    try {
      await formRoad.validate()
      mochaApi.addPassageway(value).then((res) => {
        if (res.code === 200) {
          getData()
          formRoad.clearFields()
          Message.success('添加成功')
        } else {
          Message.error("添加失败")
        }
      })
    } catch (e) {
      console.log(e);
    }
  }
  async function verification3(value) {
    try {
      await formEquipment.validate()
      mochaApi.addEquipment(value).then((res) => {
        if (res.code === 200) {
          getData()
          formEquipment.clearFields()
          Message.success('添加成功')
        } else {
          Message.error("添加失败")
        }
      })
    } catch (e) {
      console.log(e);
    }
  }
  //编辑--图标
  let [stopId, setStopId] = useState(null);
  const editIcon = (node) => {
    setBtnDisplay(false)
    let state = node.dataRef.key.lastIndexOf('-')
    let id = node.dataRef.key.substr(state + 1, node.dataRef.key.length)
    if (node.dataRef.flag === 1) {
      setCurrent(1)
      setStopId(node.dataRef.key)
      formCar.setFieldsValue(node.dataRef)
      formCar.setFieldValue('parkingName', node.dataRef.title)
    } else if (node.dataRef.flag === 2) {
      setCurrent(2)
      setStopId(id)
      formRoad.setFieldsValue(node.dataRef)
      formRoad.setFieldValue('passName', node.dataRef.title)
      formRoad.setFieldValue('parkingId', id)
    } else {
      setStopId(id)
      setCurrent(3)
      formEquipment.setFieldsValue(node.dataRef)
      formEquipment.setFieldValue('equipmentType', node.dataRef.title)
      formEquipment.setFieldValue('passId', id)
    }
  }
  //修改停车场
  const modifyCar = () => {
    let value = formCar.getFieldsValue()
    value.parkingId = Number(stopId)
    mochaApi.stopQueryCar(value).then((res) => {
      if (res.code === 200) {
        getData()
        Message.success('修改成功')
        formCar.clearFields()
      } else {
        Message.error('修改失败')
      }
    })
  }
  //修改通道
  const modifyPass = () => {
    let value = formRoad.getFieldsValue()
    value.passId = Number(stopId)
    mochaApi.stopQueryPass(value).then((res) => {
      if (res.code === 200) {
        getData()
        formRoad.clearFields()
        Message.success('修改成功')
      } else {
        Message.error('修改失败')
      }
    })
  }
  //修改设备
  const modifyEquipment = () => {
    let value = formEquipment.getFieldsValue()
    value.equipmentId = Number(stopId)
    mochaApi.stopQueryEquipment(value).then((res) => {
      if (res.code === 200) {
        getData()
        Message.success('修改成功')
        formEquipment.clearFields()
      } else {
        Message.error('修改失败')
      }
    })
  }
  return <div className='addStopVehicleBox'>
    <div className='boxLeft'>
      <div className='addBtn'> <Button type='primary' onClick={leftAdd}>新增停车场</Button></div>
      <Input.Search placeholder='请输入'
        onChange={(value) => setInputValue(value)}
        onSearch={leftQueryInput}
      />
      {hide ?
        <Tree style={{ marginTop: 10 }} autoExpandParent={true}
          defaultSelectedKeys={['1']}
          treeData={treeData}
          showLine={true}
          renderExtra={(node) => {
            return (
              <>
                <IconPen onClick={() => editIcon(node)} style={{ marginTop: 7 }} />
                <Popconfirm
                  title='确定要删除吗？'
                  onOk={() => deleteIcon(node)}
                >
                  <IconMinusCircle style={{ marginTop: 7 }} />
                </Popconfirm>
                {node.dataRef.flag !== 3 ?
                  <IconPlusCircle onClick={() => addModalIcon(node)} style={{ marginTop: 7 }} />
                  : null
                }

              </>
            )
          }}
        >
        </Tree>
        : null
      }

    </div>
    <div className='boxRight'>
      <Steps className='stepBar' current={current}>
        <Step title='新增停车场信息' />
        <Step title='新增通道信息' />
        <Step title='新增设备信息' />
      </Steps>
      <div className='MaxBox'>
        <div className='contentBox'>
          {current === 1 ?
            <Form form={formCar} className='frombox' layout='vertical'>
              <div className='titleBox'>停车场信息</div>
              <Grid.Row gutter={24}>
                <Grid.Col span={12}>
                  <FormItem label='停车场名称' field='parkingName'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12} >
                  <FormItem label='停车场编号' field='parkingNum'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12} >
                  <FormItem label='所属位置' field='parkingRegion'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='详细地址' field='parkingLocation'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='车位数' field='parkingSpaceNum'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>

                <Grid.Col span={12}>
                  <FormItem label='责任人姓名' field='businessName'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input disabled={!btnDisplay} placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='联系方式' field='businessPhone'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input disabled={!btnDisplay} placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
              </Grid.Row>

              {btnDisplay ?
                <Button type='primary' onClick={determineCar}>确定</Button>
                : <Button type='primary' onClick={modifyCar}>修改</Button>
              }
            </Form>
            : null
          }
          {current === 2 ?
            <div className='fromTable'>
              <Form form={formRoad} className='frombox' layout='vertical' initialValues={{ 'passType': '1' }}>
                <div className='titleBox'>通道基本信息</div>
                <Grid.Row gutter={24}>
                  <Grid.Col span={12}>
                    <FormItem label='所属停车场' field='parkingId'
                      rules={[{
                        validator(value, cb) {
                          if (value === '' || value === undefined) {
                            return cb('必选')
                          }
                          return cb();
                        }
                      }]}
                    >
                      <Input disabled placeholder='请输入' />
                    </FormItem>
                  </Grid.Col>
                  <Grid.Col span={12}>
                    <FormItem label='通道名称' field='passName'
                      rules={[{
                        validator(value, cb) {
                          if (value === '' || value === undefined) {
                            return cb('必选')
                          }
                          return cb();
                        }
                      }]}
                    >
                      <Input placeholder='请输入' />
                    </FormItem>
                  </Grid.Col>
                  <Grid.Col span={12}>
                    <FormItem label='通道类型' field='passType'>
                      <Radio.Group>
                        <Radio value='1'>内场通道</Radio>
                        <Radio value='2'>外场通道</Radio>
                      </Radio.Group>
                    </FormItem>
                  </Grid.Col>
                </Grid.Row>
                {btnDisplay ?
                  <Button type='primary' onClick={determinePassageway}>确定</Button>
                  : <Button type='primary' onClick={modifyPass}>修改</Button>
                }
              </Form>
            </div>
            : null
          }
          {current === 3 ?
            <Form form={formEquipment} className='frombox' layout='vertical'>
              <div className='titleBox'>设备进本信息</div>
              <Grid.Row gutter={24}>
                <Grid.Col span={12} >
                  <FormItem disabled label='所属通道' field='passId'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='设备编号' field='equipmentNum'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='设备类型' field='equipmentType'>
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
              </Grid.Row>
              <div className='titleBox'>设备配置信息</div>
              <Grid.Row gutter={24}>
                <Grid.Col span={12}>
                  <FormItem label='设备IP' field='equipmentIp'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='设备端口号' field='equipmentPort'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='设备登录账户' field='equipmentAccount'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
                <Grid.Col span={12}>
                  <FormItem label='设备登录密码' field='equipmentPassword'
                    rules={[{
                      validator(value, cb) {
                        if (value === '' || value === undefined) {
                          return cb('必选')
                        }
                        return cb();
                      }
                    }]}
                  >
                    <Input placeholder='请输入' />
                  </FormItem>
                </Grid.Col>
              </Grid.Row>
              {btnDisplay ?
                <Button type='primary' onClick={determineEquipment}>确定</Button>
                : <Button type='primary' onClick={modifyEquipment}>修改</Button>
              }
            </Form>
            : null
          }
        </div>
        <div className='boxBtn'>
          <Button
            type='secondary'
            onClick={() => navigate(-1, { replace: true })}
            style={{ marginRight: 25 }}
          >
            退出
          </Button>
        </div>
      </div>
    </div>
  </div >
}
export default AddStopVehicle